<template>
    <div
            ref="dragVerify"
            class="drag_verify"
            :style="dragVerifyStyle"
            @mousemove="dragMoving"
            @mouseup="dragFinish"
            @mouseleave="dragFinish"
            @touchmove="dragMoving"
            @touchend="dragFinish"
            style="width: 100%"
    >

        <div
                class="dv_progress_bar"
                :class="{goFirst2:isOk}"
                ref="progressBar"
                :style="progressBarStyle"
        >

        </div>
        <div
                class="dv_text"
                :style="textStyle"
                ref="message"
        >
            <slot
                    name="textBefore"
                    v-if="$slots.textBefore"
            ></slot>
            {{message}}
<!--            <span v-if="isEnd">{{this.successText}}</span>-->
<!--            <span v-else>{{this.text}}</span>-->
            <slot
                    name="textAfter"
                    v-if="$slots.textAfter"
            ></slot>
        </div>

        <div
                class="dv_handler dv_handler_bg"
                :class="{goFirst:isOk}"
                @mousedown="dragStart"
                @touchstart="dragStart"
                ref="handler"
                :style="handlerStyle"
        >
            <i :class="handlerIcon"></i>
        </div>

    </div>
</template>
<script>
    export default {
        name: "dragVerify",
        props: {
            // isPassing: {
            //     type: Boolean,
            //     default: false
            // },
            width: {
                type: Number,
                default: 250
            },
            height: {
                type: Number,
                default: 40
            },
            text: {
                type: String,
                default: "swiping to the right side"
            },
            successText: {
                type: String,
                default: "success"
            },
            background: {
                type: String,
                default: "#eee"
            },
            progressBarBg: {
                type: String,
                default: "#76c61d"
            },
            completedBg: {
                type: String,
                default: "#76c61d"
            },
            circle: {
                type: Boolean,
                default: false
            },
            radius: {
                type: String,
                default: "4px"
            },
            handlerIcon: {
                type: String
            },
            successIcon: {
                type: String
            },
            handlerBg: {
                type: String,
                default: "#e8e8e8"
            },
            textSize: {
                type: String,
                default: "14px"
            },
            textColor: {
                type: String,
                default: "#333"
            }
        },
        mounted: function () {
            setTimeout(()=>{
                const dragEl = this.$refs.dragVerify;
                this.width = dragEl.offsetWidth
                dragEl.style.setProperty("--textColor", this.textColor);
                dragEl.style.setProperty("--width", Math.floor(this.width / 2) + "px");
                dragEl.style.setProperty("--pwidth", -Math.floor(this.width / 2) + "px");
                console.log(this.$parent.$el.offsetWidth,'this.$parent');
                console.log(dragEl.offsetWidth,'this.dragVerify');
            },0)
        },
        computed: {
            handlerStyle: function () {
                return {
                    left: "0px",
                    width: this.height + "px",
                    height: this.height + "px",
                    background: this.handlerBg
                };
            },
            message: function () {
                // console.log(this.isPassing, 'this.isPassing')
                return this.isEnd ? this.successText : this.text;
            },
            dragVerifyStyle: function () {
                return {
                    width: this.width + "px",
                    height: this.height + "px",
                    lineHeight: this.height + "px",
                    background: this.background,
                    borderRadius: this.circle ? this.height / 2 + "px" : this.radius
                };
            },
            progressBarStyle: function () {
                return {
                    background: this.progressBarBg,
                    height: this.height + "px",
                    borderRadius: this.circle
                        ? this.height / 2 + "px 0 0 " + this.height / 2 + "px"
                        : this.radius
                };
            },
            textStyle: function () {
                return {
                    height: this.height + "px",
                    width: this.width + "px",
                    fontSize: this.textSize
                };
            }
        },
        data() {
            return {
                isPassing: false,
                isMoving: false,
                x: 0,
                isOk: false,
                isEnd: false
            };
        },
        methods: {
            dragStart: function (e) {
                if (!this.isEnd) {
                    this.isMoving = true;
                    var handler = this.$refs.handler;
                    this.x =
                        (e.pageX || e.touches[0].pageX) -
                        parseInt(handler.style.left.replace("px", ""), 10);
                }
                this.$emit("handlerMove");
            },
            dragMoving: function (e) {
                if (this.isMoving && !this.isPassing) {
                    var _x = (e.pageX || e.touches[0].pageX) - this.x;
                    var handler = this.$refs.handler;
                    if (_x > 0 && _x <= this.width - this.height) {
                        handler.style.left = _x + "px";
                        this.$refs.progressBar.style.width = _x + this.height / 2 + "px";
                    } else if (_x > this.width - this.height) {
                        handler.style.left = this.width - this.height + "px";
                        this.$refs.progressBar.style.width =
                            this.width - this.height / 2 + "px";
                        this.passVerify();
                    }
                }
            },
            dragFinish: function (e) {
                if (this.isMoving && !this.isPassing) {
                    var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
                    if (_x < this.width - this.height) {
                        this.isOk = true;
                        var that = this;
                        setTimeout(function () {
                            that.$refs.handler.style.left = "0";
                            that.$refs.progressBar.style.width = "0";
                            that.isOk = false;
                        }, 500);
                    } else {

                        var handler = this.$refs.handler;
                        setTimeout(()=>{
                            handler.style.left = this.width - this.height + "px";
                        },0)
                        console.log(this.width - this.height + "px")
                        this.$refs.progressBar.style.width =
                            this.width  + "px";//- this.height / 2
                        this.passVerify();
                    }
                    this.isMoving = false;
                }
            },
            passVerify: function () {
                // this.$emit("update:isPassing", true);
                // console.log(this.isPassing, 'this.isPassing')
                // this.isMoving = false;
                var handler = this.$refs.handler;
                handler.children[0].className = this.successIcon;
                this.$refs.progressBar.style.background = this.completedBg;
                this.$refs.message.style["-webkit-text-fill-color"] = "unset";
                this.$refs.message.style.animation = "slidetounlock2 3s infinite";
                this.$refs.message.style.color = "#fff";
                this.isEnd = true;
                this.$emit("passcallback",this.isEnd);
            },
            reset: function () {
                const oriData = this.$options.data();
                // for (const key in oriData) {
                //     if (oriData.hasOwnProperty(key)) {
                //         this.$set(this, key, oriData[key]);
                //     }
                // }
                this.isEnd = false;
                var handler = this.$refs.handler;
                var message = this.$refs.message;
                handler.style.left = "0";
                this.$refs.progressBar.style.width = "0";
                handler.children[0].className = this.handlerIcon;
                message.style["-webkit-text-fill-color"] = "transparent";
                message.style.animation = "slidetounlock 3s infinite";
                message.style.color = this.background;
            }
        }
    };
</script>
<style scoped>
    .drag_verify {
        position: relative;
        background-color: #e8e8e8;
        text-align: center;
        overflow: hidden;
    }

    .drag_verify .dv_handler {
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: move;
    }

    .drag_verify .dv_handler i {
        color: #666;
        padding-left: 0;
        font-size: 16px;
    }

    .drag_verify .dv_handler .el-icon-circle-check {
        color: #6c6;
        margin-top: 9px;
    }

    .drag_verify .dv_progress_bar {
        position: absolute;
        height: 34px;
        width: 0px;
    }

    .drag_verify .dv_text {
        position: absolute;
        top: 0px;
        color: #909399;
        -webkit-text-fill-color: #909399;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        background: -webkit-gradient(
                linear,
                left top,
                right top,
                color-stop(0, var(--textColor)),
                color-stop(0.4, var(--textColor)),
                color-stop(0.5, #fff),
                color-stop(0.6, var(--textColor)),
                color-stop(1, var(--textColor))
        );
        -webkit-background-clip: text;

        -webkit-text-size-adjust: none;
        animation: slidetounlock 3s infinite;
    }

    .drag_verify .dv_text * {
        -webkit-text-fill-color: var(--textColor);
    }

    .goFirst {
        left: 0px !important;
        transition: left 0.5s;
    }

    .goFirst2 {
        width: 0px !important;
        transition: width 0.5s;
    }
</style>
<style>
    @-webkit-keyframes slidetounlock {
        0% {
            background-position: var(--pwidth) 0;
        }
        100% {
            background-position: var(--width) 0;
        }
    }

    @-webkit-keyframes slidetounlock2 {
        0% {
            background-position: var(--pwidth) 0;
        }
        100% {
            background-position: var(--pwidth) 0;
        }
    }
</style>
